<template>
    <div id="home">
       <el-container>
  			<el-header>
  				<div id="logo">logo</div>
  				<el-button type="danger" style="width: 40px;height: 40px;margin-right:20px;margin-top: 10px;"
  					round
  					size="mini"
  					@click="signOut"
  					>退出
  					<i class="fa fa-sign-out"></i>
  				</el-button>
  			</el-header>
  				<el-container>
   				<el-aside width="200px">
   					<nav-menu/>
   				</el-aside>
    			<el-main>
    				<router-view/>
    			</el-main>
 			</el-container>
		</el-container>
    </div>
</template>
<script>
import NavMenu from './NavMenu'	
export default {
	components: {NavMenu},
    methods: {
    	
        signOut(){
            var action = ()=>{
                localStorage.clear();
                this.$router.push('/Signin');
            }
            this.operatorConfirm(action,'退出');
            
        }
    }
}
</script>
<style lang="scss" scoped>
#home {
	width: 100%;
    height: 100%;
    background-color: darkgrey;
    .el-container {
        height: 100%;
        width: 100%;
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
            
        }
        .el-header {
            padding: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            #logo {
                width: 200px;
                height: 100%;
                background: cyan;
                font-size: 30px;
            }
        }
        .el-aside {
          background-color: #D3DCE6;
            color: #333;
            text-align: center;
            height: 100%;
        }
        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            height: 100%;
        }
    }
	
}



</style>
